<template>
  <div id="box">
    <!-- head -->
    <div class="head">
      <!-- 项目名称 -->
      <div>项目名称:12312452434214112</div>
      <!-- 右侧按钮 -->
      <div>
        <el-button-group style="margin-right: 10%;">
          <el-button type="primary" icon="el-icon-arrow-left">上一条</el-button>
          <el-button type="primary">下一条<i class="el-icon-arrow-right el-icon--right"></i></el-button>
        </el-button-group>

        <!-- 撤回按钮 -->
        <el-button type="danger" icon="el-icon-refresh-left">撤回</el-button>
      </div>
    </div>

    <!-- content -->
    <div class="content">
      <!-- 左侧卡片 -->
      <el-tabs type="border-card">
        <el-tab-pane label="在线地图">在线地图</el-tab-pane>
      </el-tabs>
      <!-- 展开按钮 -->
      <div class="btns">
        <div class="btnss">
          <el-button type="primary" icon="el-icon-d-arrow-left"></el-button>
          <el-button type="primary" icon="el-icon-d-arrow-right"></el-button>
        </div>
      </div>
      <!-- 右侧卡片 -->
      <el-tabs type="border-card" id="tabs_right">
        <!-- 项目信息 -->
        <el-tab-pane label="项目信息">
          <!-- 表单 -->
          <el-form label-position="top" ref="infoRef" :model="infoData" label-width="80px" id="form">
            <el-row>
              <el-col :span="12">
                <el-form-item label="所属行政区">
                  <el-input v-model="infoData.name" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="行政区代码">
                  <el-input v-model="infoData.name" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="项目名称">
                  <el-input v-model="infoData.name" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="项目编号">
                  <el-input v-model="infoData.name" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="项目区编号">
                  <el-input v-model="infoData.name" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="项目类型">
                  <el-input v-model="infoData.name" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="批准文号">
                  <el-input v-model="infoData.name" disabled></el-input>
                </el-form-item>
              </el-col>
              <!-- 批准时间 -->
              <el-col :span="12">
                <el-form-item label="批准时间">
                  <el-date-picker
                    v-model="infoData.name"
                    type="date"
                    disabled
                    >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="地块类型">
                  <el-input v-model="infoData.name" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="拆旧总面积">
                  <el-input v-model="infoData.name" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="建新总面积">
                  <el-input v-model="infoData.name" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="项目地块" class="plot">
          <!-- head -->
          <div class="plot_head">
            <!-- 地块名称 -->
            <div class="plot_head_name">子地块基本信息</div>
            <!-- 搜索 -->
            <div class="plot_head_search">
              <!-- 搜索框 -->
              <el-input placeholder="输入地块编号关键字搜索" v-model="plotSearch">
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
              <!-- 条件筛选 -->
              <el-button type="primary" icon="el-icon-search">条件筛选</el-button>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="现场照片">现场照片</el-tab-pane>
        <el-tab-pane label="现场视频">现场视频</el-tab-pane>
        <el-tab-pane label="项目审核">项目审核</el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
export default {
  created () {
    this.getInfoData()
  },
  data () {
    return {
      // 项目信息表单数据
      infoData: {},

      // 项目地块相关数据
      // 搜索框绑定的值
      plotSearch: ''
    }
  },
  methods: {
    // 获取项目信息数据
    async getInfoData() {
      const { data: res } = await this.$http.post('url', this.queryInfo)
      if(res.meta.status != 200)return this.$message.error('获取项目信息失败！')
      this.warningData=res.data.goods
      this.total=res.data.total
    }
  }
}
</script>
<style scoped>
  #box{
    width: 99%;
    overflow: hidden;
    background: #ffffff;
    display: block;
    margin-left: 1%;
    padding: 15px;
    padding-top: 5px;
    box-sizing: border-box;
  }
  /* 头部样式 */
  .head{
    width: 100%;
    height: 40px;
    line-height: 40px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
  }
  .head div:nth-child(1){
    width: 56%;
    margin-right: 4%;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .head div:nth-child(2){
    width: 28%;
  }

  /* 内容区域 */
  .content{
    width: 100%;
    display: flex;
  }
  .content .el-tabs{
    width: 49%;
    border: 1px solid #dcdfe6;
  }
  /* 中间按钮样式 */
  .content .btns{
    position: relative;
    width: 2%;
  }
  .content .btns .btnss{
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .content .btnss .el-button{
    display: block;
    width: 100%;
    height: 40px;
    padding: 0;
    margin: 0;
  }


  /* /deep/ .el-tabs__content{
    padding: 15px 0;
  }
  /deep/ #pane-0{
    padding-left: 15px;
  } */
  /* 项目信息样式 */
  /deep/ #form .el-input{
    width: 90%;
  }

  /* 项目地块样式 */
  /deep/ #tabs_right .el-tabs__content #pane-1{
    position: absolute;
    left: 0;
    top: 5px;
  }
  .plot_head{
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: 32px;
    line-height: 32px;
    background-color: pink;
  }
  .plot_head_search{
    display: flex;
  }
  .plot_head_search .el-input{
    height: 100%;
    margin-right: 10px;
  }
</style>
